<!-- 首页工作台 第三行 柱状图 -->
<template>
  <div class="bar-chart">
    <div ref="chartRef" class="bar-chart-item"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";

//接收父组件传递过来的数据
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

// 使用ref获取DOM元素 用于初始化柱状图
const chartRef = ref(null);
// 用于存储柱状图实例
let myChart = null;

// 初始化柱状图
const initChart = () => {
  if (!chartRef.value) return;

  if (!myChart) {
    myChart = echarts.init(chartRef.value);
  }

  const option = {
    //控制柱状图的位置
    grid: {
      top: "10%", //调整柱状图上边距
      left: "10%", //调整柱状图左边距
      right: "10%", //调整柱状图右边距
      bottom: "14%", //调整柱状图下边距
      containLabel: true, //保证坐标轴文字不会被裁减
    },
    xAxis: {
      type: "category",
      data: props.data.map((item) => item.name),
    },
    yAxis: {
      type: "value",
    },
    //作用是绘制柱状图
    series: [
      {
        data: props.data.map((item) => item.value),
        type: "bar",
        //调整单个柱子的宽度
        barWidth: "30%",
        //调整类目之间的间距
        barGap: "10%",
      },
    ],
  };

  option && myChart.setOption(option);
};

// 组件挂载时初始化柱状图
onMounted(() => {
  initChart();
});

//监听数据变化 自动更新图表
watch(
  () => props.data,
  () => {
    initChart();
  },
  { deep: true }
);
</script>

<style scoped lang="scss">
.bar-chart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .bar-chart-item {
    width: 100%;
    height: 100%;
  }
}
</style>
